<template>
<div class="app-TagList">
 <top-TagList></top-TagList>
     <el-table :data="orderList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="标签ID" prop="name"> </el-table-column>
      <el-table-column label="电影名字" prop="description"> </el-table-column>
      <el-table-column label="评分" prop="rating">
      </el-table-column>
        <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="limit"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>
    <el-dialog title="修改电影信息" :visible.sync="dialogFormVisible">
       <el-form :model="selectTable">
        <el-form-item label="标签ID" label-width="100px">
          <el-input v-model="selectTable.name" auto-complete="off"></el-input>
          </el-form-item>
           <el-form-item label="电影名字" label-width="100px">
          <el-input v-model="selectTable.description"></el-input>
        </el-form-item>     
        </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="specsFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addspecs">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>

<script>
import TopHeader from "./TopHeader.vue";
import {
  getTagList,
  getTotalFoodCount} from "../data/api";

import {
  updateFood
} from "../data/api";
export default {

components:{
  
  "top-TagList":TopHeader
},
data() {
  return {
    limit:2,
    pageSize:1,
    total:0,
    orderList:[],
    dialogFormVisible: false,
    selectTable:{},
    specsFormVisible:false,  //编辑表单的数据
  };
},


computed: {
  
},

watch: {
  
},

methods: {
 async updateFood() {
      this.dialogFormVisible = false;
      try {
        const subData = {
          new_category_id: this.selectMenu.value,
          specs: this.specs,
        };
        const postData = { ...this.selectTable, ...subData };
        const res = await updateFood(postData);
        if (res.status == 1) {
          this.$message({
            type: "success",
            message: "更新食品信息成功",
          });
          // 获取最新的食品列表的数据
          this.getFoodListData();
        } else {
          this.$message({
            type: "error",
            message: res.message,
          });
        }
      } catch (err) {
        console.log("更新餐馆信息失败", err);
      }
    },

    addspecs() {
      this.specs.push({ ...this.specsForm });
      this.specsForm.specs = "";
      this.specsForm.packing_fee = 0;
      this.specsForm.price = 20;
      this.specsFormVisible = false;
    },
  // 编辑
  handleEdit:function(row){
    this.getSelectItemData(row, "edit");
    this.dialogFormVisible = true;
  },
  getSelectItemData: async function (row) {
    this.selectTable = {...row};
  },
  // 删除
  // handleDelete:function(index,row){

  // },
  handleCurrentChange: function(page){
    console.log("当前页码",page);
    this.pageSize = page;

    this.getFoodListData();

  },

  getFoodListData:async function(){
    let result = await getTagList({
      limit:this.limit,
      offset:(this.pageSize - 1) * this.limit
    })
    this.orderList = result;
  },
   getFoodTotalCount: async function () {
      let result = await getTotalFoodCount();
      this.total = result.count;
    },
},

created() {},

mounted() {
  this.getFoodListData();
  this.getFoodTotalCount();
}
}
</script>

<style>

</style>